<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更多样式</title>
</head>
<style>
  .container{
    width: 300px;
    height: 300px;
    border: 1px solid;
  }
  .bg-img{
    background-image: url('../source/imgs/图片1.jpg');
  }
  .container .opacity{
    opacity: 0.6;
    background-color: red;
    width: 100px;
    height: 100px;
    margin: 50px;
  }
  .cursor-demo{
    /* auto是图片失效时的处理方式，默认为浏览器自动选择 */
    cursor: url('../source/imgs/youdao.ico'),auto;
  }
  .bg-demo{
    background-image: url('../source/imgs/图片2.jpg');
    /* 表示是否重复，分为横轴和纵轴。在小图片重复铺满整个背景时很有用 */
    background-repeat: no-repeat;
    /* 背景范围 */
    background-clip: border-box;
    /* contain表示要按比例完整显示图片
       cover表示撑满，并且比例不变，所以图片有些地方就不显示了
       两个数字 或 两个百分比，手动控制背景图片大小
     */
    background-size: 100px 100px;
    /* 
      控制图片位置，第一个参数控制横向 第二个控制纵向
     */
    background-position: right center;
  }
  .spirit-demo{
    width: 109px;
    height: 98px;
    background-image: url('../source/imgs/spirit.jpg');
    background-repeat: no-repeat;
    background-position: -97px -235px;
    vertical-align: top;
  }
  .bg-atta{
    background-image: url('../source/imgs/图片3.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
</style>
<body>
  <h3>一、opacity：设置整个元素的透明度，包含边框、文字及子元素等</h3>
  <div class="container bg-img">
    <div class="opacity">
      <span>这个样式不太常用，更多的使用颜色样式的阿尔法通道</span>
    </div>
  </div>
  
  <h3>二、cursor:鼠标样式</h3>
  <div class="container cursor-demo">
    <p>
      pointer 小手<br>
      e-resize:重调尺寸<br>
      url:使用ico图标代替光标
    </p>
  </div>

  <h3>三、盒子的显示/隐藏</h3>
  <p>
    dispaly:none  不生成盒子，空出来的坑会影响其他盒子排列<br>
    visibility:hidden 生成盒子，但是不可见<br>
  </p>

  <h3>四、背景图</h3>
  <h4>有时候使用背景图片和img元素好像都可以，但是需要按照一下两个原则选择</h4>
  <p>
    1、图片属于网页内容时，使用img，例如广告、文章中的插图<br>
    2、图片仅用于美化页面时，使用背景图。例如按钮元素的背景图
  </p>
  <h4> 背景图涉及到下面几个css属性</h4>
  <p>
    1、background-img: url('');设置背景图片<br>
    2、background-clip: border-box; 背景覆盖范围<br>
    3、background-size: content/cover/100px 100px/50% 50%;背景图片大小<br>
    4、background-position: left top/center bottom/4px 3px;背景图片位置<br>
    5、background-attachment: 控制背景图是否固定；<br>
    6、background: url() no-repeat center/100% fixed #000,路径 是否重复，位置，尺寸，固定，背景色。顺序固定，但不是每个属性都要写，不写的可以省略。如果位置和尺寸都有，必须先写位置
  </p>
  <div class="container bg-demo" style="display: inline-block;">
  </div>
  <div class="container" style="display: inline-block;vertical-align: top;">
    <div class="spirit-demo"></div>
    使用雪碧图，及很多小图片合成大图片，然后利用属性只展示指定位置就行
  </div>

  <div class="container bg-atta" style="display: inline-block;">
    
  </div>
</body>
</html>